<template>
  <div class="cabinet-detail">
    <div class="detail-title">
      <img src="@/assets/images/modalDetail/icon_tc_xhpzj.png" />
      <span class="font-28">化学品总计：</span>
      <span class="font-22">{{ rest.cabinetChemTotal }}</span>
      <span class="font-18">瓶</span>
    </div>
    <div class="detail-content">
      <div class="bg-fgk">
        <div class="bg-fgk-top">
          <span class="font-22">{{ rest.normalCount }}</span>
          <span class="font-16">瓶</span>
        </div>
        <div class="line"></div>
        <div class="bg-fgk-bottom">({{ rest.normalDetailCount }})</div>
      </div>
      <div class="bg-gk">
        <div class="bg-fgk-top">
          <span class="font-22">{{ rest.controlCount }}</span>
          <span class="font-16">瓶</span>
        </div>
        <div class="line"></div>
        <div class="bg-fgk-bottom">({{ rest.controlDetailCount }})</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['rest'],
    data () {
      return {
        deviceLevel: [1, 2, 3]
      }
    },
    mounted () {
      console.log(this.rest)
    }
  }
</script>

<style lang="less" scoped>
  .cabinet-detail {
    height: 100%;
    width: 100%;
    .detail-title {
      margin-top: 5%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      color: #fff;
      img {
        padding-right: 25px;
      }
    }
  }
  .detail-content {
    margin-top: 30px;
    height: 70%;
    display: flex;
    > div {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      .line {
        height: 1px;
        width: 60%;
        margin-bottom: 10px;
        border-bottom: 1px dashed #fff;
      }
      .bg-fgk-top {
        height: 40px;
        margin-top: 45%;
        margin-bottom: 5%;
      }
      .bg-fgk-bottom {
        text-align: center;
        font-size: 22px;
        font-weight: 600;
      }
    }
    .bg-gk {
      color: #ff3355;
      background: url('~@/assets/images/viewIcon/icon_tc_hxpgz_gkbq.png') no-repeat;
      background-position: center;
      background-size: 90%;
    }
    .bg-fgk {
      color: #fff;
      background: url('~@/assets/images/viewIcon/icon_tc_hxpgz_fgkbq.png') no-repeat;
      background-position: center;
      background-size: 90%;
    }
  }
  .font-28 {
    line-height: 1;
    font-size: 28px;
    font-weight: 600;
  }
  .font-22 {
    line-height: 0.8;
    font-size: 48px;
    font-weight: 600;
  }
  .font-18 {
    line-height: 1;
    font-size: 16px;
    font-weight: 500;
  }
  .font-16 {
    line-height: 0.8;
    font-size: 16px;
    font-weight: 500;
  }
  @media screen and (max-height: 860px) {
    .font-22 {
      font-size: 32px !important;
    }
    .bg-fgk-bottom {
      font-size: 14px !important;
    }
    .bg-fgk-top {
      margin-top: 37% !important;
    }
    .font-28 {
      font-size: 24px !important;
    }
    .bg-gk {
      background-size: 100% !important;
    }
    .bg-fgk {
      background-size: 100% !important;
    }
  }
  @media screen and (min-height: 1080px) {
    .bg-fgk-top {
      margin-top: 58% !important;
    }
  }
</style>
